<template>
    <div class="detail-content">
        <div class="detail-title">{{ info.title }}</div>
        <div class="author-tag">
            <span>{{ info.sourceName }}</span>
            <span>{{ dateFormat(info.pubTime) }}</span>
        </div>

        <div class="detail-box" ref="detailBox">
            <div class="detail-mask" v-if="!showAll" :style="{height : maskH}">
                <div class="mask" @click="handlerShowAll" >
                    <span>展开继续阅读</span>
                    <img src="">
                </div>
            </div>
            <div class="detail-container" v-html="content"></div>
        </div>
        <list-ad></list-ad>
        <div class="hot-port">热点推荐</div>
        <list-item></list-item>
    </div>
</template>

<script setup>
import ListAd from '@/components/layout/list/ad.vue'
import ListItem from '@/components/ListPage/ListItem.vue'
import { onBeforeMount, ref,nextTick,defineProps} from 'vue'
import { useRoute } from 'vue-router'
import { getDetail } from '@/api/index.js'
import { dateFormat, contentFormat,contentSlice} from '@/util/util.js'

let route = useRoute()

const props = defineProps(['showBack'])

const { id, tpl, type } = route.query
const detailBox = ref(null)

const info = ref('')
const content = ref('');
const showAll = ref(false)
const maskH = ref('100px')
let partContent;
onBeforeMount(async () => {
    let res = await getDetail(id, tpl, type)
    if (res.status == 200) {
        info.value = res.data;
        partContent = contentSlice(res.data.content)
        content.value += contentFormat(partContent.part)
        nextTick(()=>{
            const boxRect = detailBox.value.getBoundingClientRect();
            maskH.value = boxRect.height / 3 + 'px'
        })
    }
    else {
        // ... error todo
    }
})


const handlerShowAll = () => {
    showAll.value = true;
    content.value += contentFormat(partContent.rest)
}

</script>

<style lang="scss" scoped>
    .detail-content {
        padding: 15px 10px;

        .detail-title {
            font-size: 20px;
            font-weight: bold;
            line-height: 1.4em;
        }

        .author-tag {
            font-size: 13px;
            color: #666;
            margin: 15px 0px;

            &>span:nth-child(1) {
                margin-right: 15px;
            }
        }
        .detail-box{
            position: relative;
            overflow: hidden;
            .detail-mask{
                position: absolute;
                width: 100%;
                bottom: 0px;
                background: linear-gradient(rgba(255, 255, 255, 0),white, white);
                color: #ff6239;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                .mask{
                    display: flex;
                    align-items: center;
                }
                img{
                    width: 20px;
                    margin-left: 10px;
                }
            }
        }

        .detail-container {
            p {
                margin-bottom: 15px;
                font-size: 18px;
                line-height: 30px;
            }
        }

        .detail-container ::v-deep p {
            margin-bottom: 15px;
            font-size: 18px;
            line-height: 30px;
        }

        .detail-container ::v-deep img {
            width: 100%;
        }
        .hot-port{
            position: relative;
            font-weight: bold;
            vertical-align: middle;
            margin-top: 10px;
            &::before{
                content: '';
                display: inline-block;
                height: 15px;
                width: 2px;
                background-color: rgb(255, 139, 139);
                margin-right: 10px;
                vertical-align: middle;
            }
        }
    }
</style>